<template>
    <div v-loading="true" element-loading-text="开发中" class="container">
        <!-- <div class="container"> -->
        <div class="padding">
            <cmsTitle no-back />
            <el-tabs v-model="activeName">
                <el-tab-pane label="全部" />
                <el-tab-pane label="未上线" />
                <el-tab-pane label="上线中" />
                <el-tab-pane label="已下线" />
            </el-tabs>
            <div class="pd">
                <el-input v-model="query.searchStr" class="input" placeholder="请输入内容" prefix-icon="el-icon-search" />
                <span style="margin:0 10px 0 30px">上线日期</span>
                <el-date-picker
                    v-model="date"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                />
                <el-button type="primary" style="float:right" @click="Edit({})">新增</el-button>
            </div>
        </div>
        <div class="main">
            <el-table :data="tableData">
                <el-table-column type="index" label="排序" width="50" align="center" />
                <el-table-column
                    v-for="(val,key) in header"
                    :key="key"
                    :prop="val"
                    :label="key"
                    :sortable="/线|次数/.test(key)?'custom':false"
                    :formatter="Formatter"
                    align="center"
                />
                <el-table-column width="210px" label="操作" align="center">
                    <template #default="{row}">
                        <!-- <el-button type="text" @click.native="View('view',row)">查看</el-button> -->
                        <el-button type="text" size="small" @click="ChangeState(row)">{{ '立即下线' }}</el-button>
                        <el-button type="text" size="small" @click="Edit(row)">修改</el-button>
                        <el-button type="text" size="small" @click="Remove(row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog center title="提示" :visible.sync="dialogVisible" width="580px">
            <el-form ref="from" label-position="right" label-width="80px">
                <div class="form-imgblock">
                    <upload :file.sync="form.sort">
                        <p slot="header">建议尺寸: 1125 * 2001</p>
                        <p slot="footer">广告表层短图片</p>
                    </upload>
                    <upload :file.sync="form.long">
                        <p slot="header">建议尺寸: 1125 * 2436</p>
                        <p slot="footer">广告表层长图片</p>
                    </upload>
                    <upload :file.sync="form.back">
                        <p slot="header">建议尺寸: 1125 * 2436</p>
                        <p slot="footer">广告背景层图片</p>
                    </upload>
                </div>
                <div class="form-text">
                    <el-form-item required label="广告标题">
                        <el-input v-model="form.title" width="230" />
                    </el-form-item>
                    <el-form-item label="跳转链接">
                        <el-input v-model="form.url" />
                    </el-form-item>
                    <el-form-item label="上线时间">
                        <el-date-picker
                            v-model="form.onlineTime"
                            type="date"
                            placeholder="选择日期"
                        />
                    </el-form-item>
                    <el-form-item label="下线时间">
                        <el-date-picker
                            v-model="form.offlineTime"
                            type="date"
                            placeholder="选择日期"
                        />
                    </el-form-item>
                </div>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="Cancel">取 消</el-button>
                <el-button type="primary" @click="Confirm">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import upload from './components/upload'
export default {
    components: {
        upload
    },
    props: {

    },
    data () {
        return {
            dialogVisible: false,
            activeName: 0,
            date: [],
            form: {
                title: '',
                url: '',
                onlineTime: '',
                offlineTime: '',
                sort: '',
                long: '',
                back: ''
            },
            query: {
                searchStr: ''
            },
            header: {
                广告标题: 'title',
                广告状态: 'state',
                广告图片: 'img',
                上线时间: 'onlineTime',
                上线时长: 'time',
                曝光次数: 'viewCount',
                点击次数: 'clickCount'
            },
            tableData: [{ title: 666 }],
            imageUrl: ''
        }
    },
    computed: {

    },
    watch: {

    },
    created () {

    },
    mounted () {
    },
    methods: {
        Query () {

        },
        // 下线
        ChangeState () {

        },
        Remove () {

        },
        Formatter (row, { label }, cellValue) {
            return cellValue
        },
        // 封装弹窗 方便await调用
        _Dialog (view) {
            this.dialogVisible = true
            return new Promise((resolve, reject) => {
                this.Confirm = e => {
                    if (view) {
                        resolve(view)
                    } else {
                        this.dialogVisible = false
                        reject('complete')
                    }
                }
                this.Cancel = err => {
                    this.dialogVisible = false
                    reject('cancel')
                }
            })
        },
        Confirm () {

        },
        Cancel () {

        },
        async Edit (obj) {
            console.log('操作对象', obj)
            const result = await this._Dialog(obj.title)
            console.log('操作结果', result)
        }
    }
}
</script>

<style scoped lang="stylus">
.padding
    padding 0 40px
    background #fff
.container::v-deep
    min-height 100%
    display flex
    flex-direction column
.pd
    margin 25px 0 30px
.input
    width 180px
.main
    background-color #fff
    margin-top 10px
    padding 30px 50px
.form-imgblock
    margin 30px auto
    display flex
    justify-content space-evenly
.form-text
    width 300px
    margin 10px auto
.el-form
    ::v-deep .el-input
        width 220px
</style>
